<template>
	<view>
		<navigationBar :back_bool="back_bool" title="我的信息" :btn="btn_bool"></navigationBar>
		<view  style="width: 100%;height: 100%;position: absolute;" :style="{backgroundColor:by_color}"></view>
		<view class="head">
			<image src="/static/tab-bar/my-1.png" mode="widthFix" class="img"></image>
			<view class="content">
				<text class="text1">赵亚楠</text>
				<text class="text2">简介：453674634786347658</text>
			</view>
		</view>
		<view class="list_s" @click="to_color">
			<image src="/static/set.png" mode="widthFix" class="img"></image>
			<text>设置</text>
		</view>



		<!-- <u-button @click="xgColor">修改背景</u-button> -->
	</view>
</template>

<script>
	import navigationBar from "@/components/navigation-bar/navigation-bar.vue" //导航栏
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters(['by_color'])
		},
		components: {
			navigationBar,
		},
		data() {
			return {
				back_bool: false,
				btn_bool: false
			}
		},
		methods: {
			...mapMutations(['xg_color']),
			xgColor() {
				this.xg_color('#ffffff')
			},
			to_color(){
				uni.navigateTo({
					url:'/API/my/by-color'
				})
			}
		}
	}
</script>

<style lang="scss">
	.pages {
		width: 100%;
		height: 100%;
		background-color: #CCCCCC;
		position: fixed;
	}

	.head {
		width: 100%;
		height: 150rpx;
		padding: 0 20rpx;
		background-color: #FFFFFF;
		position: relative;
		display: flex;
		align-items: center;
		opacity: .8;
		.img{
			width: 95rpx;
			height: 95rpx;
			margin-right: 20rpx;
		}
		.content{
			display: flex;
			flex-direction: column;
			.text1{
				font-weight: 600;
			}
			.text2{
				margin-top: 10rpx;
				color: #CCCCCC;
				// font-weight: 600;
			}
		}
	}
	.list_s{
		width: 750rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		position: relative;
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		opacity: .8;
		.img{
			width: 65rpx;
			height: 65rpx;
			margin: 0 20rpx;
		}
	}
</style>
